<template>
  <el-form
      ref="ruleFormRef"
      :model="SearchForm"
      label-position="left"
      label-width="70px"
      style="width: calc(100vw - 220px);"
  >
    <el-row>
      <div v-for="item in SearchType">
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop"
                      v-if="item.showType!=='state'
                &&item.showType!=='icon'
                &&item.showType!=='sex'
                &&item.showType!=='date'
                &&item.showType!=='borrowType'
                &&item.showType!=='borrowState'
                &&item.showType!=='sorts'
                &&item.showType!=='roles'
                &&item.showType!=='users'
">
          <el-input v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message"/>
        </el-form-item>
        <!--    状态      -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='state'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="item in [{label:'正常',value:1},{label:'禁用',value:0}]"
                       :key="item.value" :label="item.label" :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--    图标      -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='icon'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="i in iconList" :key="i.value" :label="i.label" :value="i.value">
              <component :is="i.value"></component>
            </el-option>
          </el-select>
        </el-form-item>
        <!--    性别      -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='sex'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="item in [{label:'全部',value:'全部'},{label:'男',value:'男'},{label:'女',value:'女'}]"
                       :key="item.value" :label="item.label" :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!--    生日      -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='date'">
          <el-date-picker
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="SearchForm[item.prop]"
              type="date"
              :placeholder="item.rules[0].message"
          />
        </el-form-item>
        <!--     角色        -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='roles'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="i in rolesList"
                       :key="i.id" :label="i.name" :value="i.id"
            />
          </el-select>
        </el-form-item>
        <!--   借阅状态   -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='borrowState'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="i in [{name:'全部',id:2},{name:'在库',id:1},{name:'借出',id:0}]"
                       :key="i.id" :label="i.name" :value="i.id"
            />
          </el-select>
        </el-form-item>
        <!--   借阅类型   -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='borrowType'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="i in [{name:'全部',id:2},{name:'还书',id:1},{name:'借书',id:0}]"
                       :key="i.id" :label="i.name" :value="i.id"
            />
          </el-select>
        </el-form-item>
        <!--     类别        -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='sorts'">
          <el-select v-model="SearchForm[item.prop]" :placeholder="item.rules[0].message">
            <el-option v-for="i in sortsList"
                       :key="i.id" :label="i.name" :value="i.id"
            />
          </el-select>
        </el-form-item>
        <!--     借阅用户        -->
        <el-form-item :label="item.label" :rules="item.rules" :prop="item.prop" v-if="item.showType==='users'">
          <el-select v-model="SearchForm[item.prop]" filterable :placeholder="item.rules[0].message">
            <el-option v-for="i in usersList"
                       :key="i.id" :label="i.name" :value="i.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <!--    操作      -->
      <div style="padding-bottom: 20px;">
        <el-button type="primary" style="color: white;" :icon="Search" @click="onSearch(ruleFormRef)">
          搜索
        </el-button>
        <el-button type="default" :icon="RefreshRight" @click="resetSearch(ruleFormRef)">
          重置
        </el-button>
      </div>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import {defineModel, defineProps, onMounted, ref} from 'vue'
import {iconList} from "@/utils";
import {RefreshRight, Search} from '@element-plus/icons-vue'
import type {FormInstance} from 'element-plus'
import api from "@/api";

const ruleFormRef = ref<FormInstance>()
const SearchForm = defineModel('form');
const SearchType = defineModel('type');

const sortsList = ref([{id: 0, name: '全部'}]);
const rolesList = ref([{id: 0, name: '全部'}]);
const usersList = ref([{id: 0, name: '全部'}]);
onMounted(() => {
  if (SearchType.value[0].label == "书册编码" || SearchType.value[0].label == "书本条码") {
    api.sort.listSorts().then((res: any) => {
      for (let i = 0; i < res.data.length; i++) {
        sortsList.value.push(res.data[i]);
      }
    })
  }
  if (SearchType.value[0].label == "账号" || SearchType.value[0].label == "角色名称") {
    api.role.listRoles().then((res: any) => {
      for (let i = 0; i < res.data.length; i++) {
        rolesList.value.push(res.data[i]);
      }
    })
  }
  if (SearchType.value[1].label == "书本名称") {
    api.user.listUsers().then((res: any) => {
      if (res.data!==null){
        for (let i = 0; i < res.data.length; i++) {
          usersList.value.push(res.data[i]);
        }
      }
    })
  }
})

interface Props {
  onSearch?: Function;
  resetSearch?: Function;
}

defineProps<Props>();
</script>

<style scoped>
:deep(.el-input__wrapper) {
  width: 200px !important;
  margin-right: 20px;
}

:deep(.el-select__wrapper) {
  width: 200px !important;
  margin-right: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 600 !important;
}
</style>